<template>
  <div class="classify">
    <div class="classify-one">
      <div class="classify-two">
        <img src="./img/文件.png" alt="" />
        <h3>{{ this.name }}</h3>
      </div>

      <div class="classify-three">
        <div class="classify-five" v-for="item in tableData" :key="item.id">
          <img :src="item.titleImage" alt="" />
        </div>
      </div>
      <el-pagination background layout="prev, pager, next" :total="total" :current-page="current" v-if="tableData && tableData.length > 0" class="pagination-center" >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      tableData: [],
      name: "",
      total:"",
      current:1,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getList();
    this.name = localStorage.getItem("name");
  },
  methods: {
    getList() {
      this.$axios
        .post(`/api/api/category/article/list`, {
          current: this.current,
          size: 10,
          categoryId: this.id,
        })
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData, "1111");
          this.total=res.data.total
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.classify {
  background-color: #f4f4f4;
  height: 100vh;
}
.classify-one {
  width: 900px;
  margin: 0 auto;
}
.classify-two {
  display: flex;
  align-items: center;
}
.classify-two img {
  width: 24px;
  height: 24px;
  margin-left: 20px;
}
.classify-three {
  width: 900px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.classify-three img {
  width: 439px;
  height: 200px;
}
.pagination-center {
  display: block;  /* 确保是块级元素 */
  margin: 20px auto;  /* 上下外边距20px，左右自动居中 */
  text-align: center;  /* 进一步确保内部元素居中 */
}
</style>